<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-wrap-datadetail ddp-wrap-datacolumn">
  <!-- tab -->
  <div class="ddp-wrap-tab">
    <ul class="ddp-ui-tab ddp-clear">
      <li (click)="mode = 'information'" [ngClass]="{'ddp-selected': mode === 'information'}">
        <a href="javascript:">{{'msg.metadata.th.information' | translate}}</a>
      </li>
      <li (click)="mode = 'schema'" [ngClass]="{'ddp-selected': mode === 'schema'}">
        <a href="javascript:">{{'msg.metadata.th.col-schema' | translate}}</a>
      </li>
    </ul>
  </div>
  <!-- //tab -->
  <div class="ddp-wrap-tab-contents">
    <!-- information -->
    <div class="ddp-ui-tab-contents" *ngIf="mode === 'information'">
      <!-- datadetail -->
      <div class="ddp-ui-datadetail ddp-border-none">
        <label class="ddp-label-detail">{{'msg.storage.ui.data.info' | translate}}</label>
        <table class="ddp-table-detail">
          <colgroup>
            <col width="170px">
            <col width="*">
          </colgroup>
          <tbody>
          <tr>
            <th>
              {{'msg.comm.ui.description' | translate}}
            </th>
            <td>
              {{ metaData.description || ('msg.metadata.ui.no.description' | translate)}}
            </td>
          </tr>
          </tbody>
        </table>
        <table class="ddp-table-detail">
          <colgroup>
            <col width="170px">
            <col width="*">
          </colgroup>
          <tbody>
          <tr>
            <th>
              {{'msg.metadata.md.ui.data.type' | translate}}
            </th>
            <td>
              <span class="ddp-box-tag-value ddp-hive">{{metaData.sourceType}}</span>
            </td>
          </tr>
          </tbody>
        </table>
        <table class="ddp-table-detail">
          <colgroup>
            <col width="170px">
            <col width="*">
          </colgroup>
          <tbody>
          <tr>
            <th>
              {{'msg.metadata.md.th.catalogs' | translate}}
            </th>
            <td>
              <div class="ddp-ui-catalogs" *ngFor="let catalog of metaData.catalogs">
                <div class="ddp-box-catalogs">
                  <span *ngFor="let hierarchy of catalog['hierarchies']">{{hierarchy.name}}</span>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <table class="ddp-table-detail">
          <colgroup>
            <col width="170px">
            <col width="*">
          </colgroup>
          <tbody>
          <tr>
            <th>
              {{'msg.metadata.md.ui.tags' | translate}}
            </th>
            <td>
              <div class="ddp-ui-tags ddp-txt">
                <div *ngFor="let tag of metaData.tags" [ngClass]="{'ddp-tags' : tag.name !== '','ddp-tag-default': tag.name === ''}">
                  {{tag.name}}
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!-- //datadetail -->
    </div>
    <!-- //information -->
    <!-- column schema -->
    <div class="ddp-ui-tab-contents" *ngIf="mode === 'schema'">
      <div class="ddp-data-details ddp-ui-preview-contents" style="top: 120px">
        <!-- header -->
        <table class="ddp-table-form ddp-table-type2 ddp-table-details">
          <colgroup>
            <col width="140px">
            <col width="100px">
            <col width="140px">
            <col width="120px">
            <col width="150px">
            <col width="150px">
            <col width="200px">
            <col width="150px">
            <col width="300px">
          </colgroup>
          <thead>
          <tr>
            <th>
              {{'msg.metadata.th.column.popularity' | translate}}
              <div class="ddp-wrap-hover-info">
                <em class="ddp-icon-info3"></em>
                <!-- popup -->
                <div class="ddp-box-layout4 ddp-popularity">
                  <div class="ddp-data-title">
                    {{'msg.metadata.th.column.popularity.tooltip.title' | translate}}
                  </div>
                  <div class="ddp-data-det">
                    {{'msg.metadata.th.column.popularity.tooltip.desc' | translate}}
                    <ul>
                      <li>• {{'msg.metadata.th.column.popularity.tooltip.dashboard.conn' | translate}}
                      </li>
                    </ul>
                  </div>

                </div>
                <!-- //popup -->
              </div>
            </th>
            <th>
              {{'msg.metadata.th.physical.type' | translate}}
            </th>
            <th>
              {{'msg.metadata.th.physical.name' | translate}}
            </th>
            <th>
              {{'msg.metadata.th.name' | translate}}
            </th>
            <th>
              {{'msg.metadata.th.dictionary' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.logical.type'| translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.format' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.code.table' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.description' | translate}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let column of columnList">
            <!-- 인기도 -->
            <td class="">
              <div class="ddp-bar">
                <span [ngStyle]="{'width': getColumnPopularity(column)}"></span>
              </div>
            </td>
            <!-- //인기도 -->
            <td>
              {{column.physicalType}}
            </td>
            <td>
              {{column.physicalName}}
            </td>
            <!-- Name -->
            <td>
              {{column.name}}
            </td>
            <!-- //Name -->
            <!-- Dictionary -->
            <td>
              {{column.dictionary ? column.dictionary.logicalName : ''}}
            </td>
            <!-- //Dictionary -->
            <!-- logical type -->
            <td class="ddp-inherit">
              <!-- select -->
              <div class="ddp-ui-selected-option ddp-pop-select">
                  <span class="ddp-link-text ddp-txt-icon">
                    <em class="{{getFieldTypeIconClass(column.type)}}"></em>
                    {{getSelectedLogicalTypeLabel(column)}}
                  </span>
              </div>
              <!-- //select -->
            </td>
            <!-- //logical type -->
            <!-- Format -->
            <td>
              {{column.format}}
            </td>
            <!-- //Format -->
            <!-- Code Table -->
            <td>
              {{column.codeTable ? column.codeTable.name : ''}}
            </td>
            <!-- //Code Table -->
            <!-- Description -->
            <td>
              {{column.description}}
            </td>
            <!-- //Description -->
          </tr>
          </tbody>
        </table>
        <!-- //header -->
      </div>
    </div>
    <!-- //column schema -->
  </div>
</div>
